<template>
    <div class='component-button-loading'>
        <div class="component-button-loading__progress" v-if='loading' :style='{width:percent}'></div>
        <div class="component-button-loading__button" :class='{disabled:loading || disabled, "short":short, "mid":mid, button:button}' @click='emitClick'>
            <transition name='fade'>
                <span class='component-button-loading__text' :class='{ "hide":loading }'>
                    <slot></slot>
                </span>
            </transition>
        </div>
        <loading v-show='loading' class='component-button-loading__loading' mode='absolute' :color='color' :size='14'></loading>
    </div>

</template>

<script>
    import loading from '../components/Loading.vue'

    export default {
        props:{
            button:{
                type: Boolean,
                default: true
            },
            color:{
                type: String,
                default: '#fff'
            },
            percent:{
                type: [String,Number],
                default: 0
            },
            loading:{
                type: Boolean,
                default: false
            },
            short:{
                type: Boolean,
                default: false
            },
            disabled:{
                type: Boolean,
                default: false
            },
            mid:{
                type: Boolean,
                default: false
            },
        },
        created(){

        },
        data() {
            return {

            }
        },
        computed:{

        },
        methods:{
            emitClick(){
                this.$emit('click')
            }
        },
        components:{ loading }
    }
</script>

<style lang='scss'>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-button-loading{
        position: relative;
    }
    .component-button-loading__progress{
        border-radius: 4px;
        position: absolute;
        top:0;
        left:0;
        height: 100%;
        transition:ease width 250ms;
        background-color: $green;
        z-index:2;
    }
    .component-button-loading__button{
        margin-top: 0px;
    }
    .component-button-loading__loading{
        top:50%;
        left:50%;
        transform:translate3d(-50%, -50%, 0);
    }
    .component-button-loading__text{
        &.hide{
            opacity: 0;
        }
    }

</style>


